<template>
  <el-dialog title="新增短信模板" :visible.sync="visible" width="60%">
      <el-form label-width="120px" size="mini" :model="form" ref="form" :rules="formRule">
        <el-row >
          <!--
          <el-col :span="8">
            <el-form-item label="短信编号" >
              <el-input v-model="form.messageCode"></el-input>
            </el-form-item>
          </el-col>
          -->
          <el-col :span="8">
            <el-form-item label="短信模板名称" prop="templateName">
              <el-input v-model="form.templateName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="模板类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择" size="mini" style="width:100%">
                <el-option
                  v-for="item in options3"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="">
              <el-select v-model="tempParam" placeholder="请选择" size="mini" style="width: 100%">
                <el-option
                  v-for="item in params"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button class="t-ml30" type="primary" size="mini" @click="joinStr">插入变量值名称</el-button>
          </el-col>

        </el-row>
        <el-row :gutter="20">
          <el-col>
            <el-form-item label="编辑短信内容" prop="templateContent">
              <el-input type="textarea" v-model="form.templateContent"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" style="display: flex; justify-content: flex-end; margin-bottom: 10px">
        <el-button type="primary" class="reset-btn" size="mini" @click="visible = false">取消</el-button>
        <el-button type="primary" size="mini" @click="save('form')">保存</el-button>
      </div>
    </el-dialog>
</template>

<script>
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: "80%",
    },
  },
  data() {
    return {
      formRule: {
        templateName: [{required:true,message:'请输入模板名称！',trigger:'blur'}],
        type: [{required:true,message:'请选择模板类型！',trigger:'blur'}],
        templateContent: [{required:true,message:'请输入模板内容！',trigger:'blur'}],
      },
      tempParam: "",
      form: {
        messageCode: "",
        templateName: "",
        type: "",
        templateContent: "",
        // companyName: "",
        // entAmount: "",
        // entNum: "",
        // endNum: "",
        // endAmount: "",
        // receivedAmount: "",
        // receivedNum: "",
        // commissionRate: "",
      },
      rules: {
        messageCode: [{ required: true, message: "请填写", trigger: "blur" }],
        templateName: [{ required: true, message: "请填写", trigger: "blur" }],
        type: [{ required: true, message: "请选择", trigger: "change" }],
      },
      params: [
        {
          value: "##出账机构##",
          label: "出账机构",
        },
        {
          value: "##业务品种##",
          label: "业务品种",
        },
        {
          value: "##截止日期##",
          label: "截止日期",
        },
        {
          value: "##欠款总额##",
          label: "欠款总额",
        },
        {
          value: "##应还款日期##",
          label: "应还款日期",
        },
        {
          value: "##额度编号##",
          label: "额度编号",
        },
        {
          value: "##发放金额##",
          label: "发放金额",
        },
        {
          value: "##用户姓名##",
          label: "用户姓名",
        },
      ],
      options2: [
        {
          value: "1",
          label: "成功",
        },
        {
          value: "2",
          label: "失败",
        },
      ],
      options3: [
        {
          value: "0",
          label: "首次回访",
        },
        {
          value: "1",
          label: "正常贷款回访",
        },
        {
          value: "2",
          label: "逾期贷款催收",
        },
      ],
    };
  },
  computed: {
    visible: {
      get() {
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("update:dialogVisible", val);
      },
    },
  },
  methods: {
    joinStr(){
      if(this.tempParam){
        let str = this.form.templateContent + this.tempParam;
        this.form.templateContent = str;
      }else{
        this.$message.warning("请选择参数后，使用。");
      }
    },
    save(name) {
      this.$refs[name].validate((flag) => {
        if (flag) {
          this.$axios({
            method: "post",
            url: "/IAM/MC/template/add",
            data:this.form
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("新增成功");
              this.$parent.showList();
            }
            this.visible = false;
          });
        }
      });
    },
  },
};
</script>

<style>
</style>
